feat(ui-pagination): add prop to customize screenreader label on buttons#2027
Merged
Conversation
There was a problem hiding this comment.
Pull Request Overview
Adds a new screenReaderLabelPageButton prop to let users customize the aria-label for individual page buttons.
- Defines the new prop in
props.ts, updates prop types and allowed props - Passes the custom label into
Pagination.Pageand the base button component - Adds a focused test for the new behavior and updates documentation with examples
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-pagination/src/Pagination/props.ts | Introduce screenReaderLabelPageButton to props |
| packages/ui-pagination/src/Pagination/index.tsx | Spread screenReaderLabel onto <Pagination.Page> |
| packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx | Test aria-label behavior for page buttons |
| packages/ui-pagination/src/Pagination/README.md | Document new prop with usage example |
| packages/ui-pagination/src/Pagination/PaginationButton/props.ts | Accept screenReaderLabel in button props |
| packages/ui-pagination/src/Pagination/PaginationButton/index.tsx | Apply aria-label when screenReaderLabel is set |
Comments suppressed due to low confidence (4)
packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx:1132
- Remove
.onlyto ensure the full test suite runs and avoid accidentally skipping other tests.
it.only('should add aria-label when screenReaderLabelPageButton is set', async () => {
packages/ui-pagination/src/Pagination/README.md:66
- [nitpick] Avoid using backslashes for line breaks in Markdown; use blank lines or proper paragraph breaks to ensure consistent rendering.
You can set any `totalPageNumber`, the component can handle it easily.\
packages/ui-pagination/src/Pagination/props.ts:100
- [nitpick] The parameter name was changed to
totalPageNumber, but the default prop still refers tonumberOfPages. Consider aligning naming for consistency.
labelNumberInput?: (totalPageNumber: number) => React.ReactNode
packages/ui-pagination/src/Pagination/tests/Pagination.test.tsx:1143
- [nitpick] The regex match on the button name may miss aria-label comparisons; using
getAllByLabelTextor asserting directly onaria-labelmay yield a more robust test.
const paginationButtons = screen.getAllByRole('button', { name: /\d$/ })
|
matyasf
force-pushed
the
pagination_button_sr
branch
from
e1383ed to
d6adbfd
Compare
ToMESSKa
approved these changes
Jun 17, 2025
ToMESSKa
requested changes
Jun 17, 2025
Contributor
There was a problem hiding this comment.
add this please to the functional example too
HerrTopi
reviewed
Jul 3, 2025
Contributor
There was a problem hiding this comment.
This would be cleaner if you'd use the ...(predicate?{}:{}) pattern. The current pattern with the && could result in undesirable behaviour.
When the predicate is false, the result will be the boolean false. Which in this case would not matter much, but ...false is not an intended expression
matyasf
force-pushed
the
pagination_button_sr
branch
from
d6adbfd to
cd5c3b6
Compare
matyasf
force-pushed
the
pagination_button_sr
branch
from
cd5c3b6 to
2547b50
Compare
HerrTopi
reviewed
Jul 3, 2025
Contributor
There was a problem hiding this comment.
Sorry, I missed one. Could you do the same pred?{}:{} pattern here as well?
HerrTopi
approved these changes
Jul 3, 2025
The new prop, called screenReaderLabelPageButton allows to customize screenreader messages on the page buttons (e.g. 1,2,3,4...) INSTUI-4602
matyasf
force-pushed
the
pagination_button_sr
branch
from
2547b50 to
bce1039
Compare
ToMESSKa
approved these changes
Jul 4, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The new prop, called
screenReaderLabelPageButtonallows to customize screenreader messages on the page buttons (e.g. 1,2,3,4...)To test: Add this new prop to some of the new examples, and test with various screenreaders, that the given text is announced not the one on the button
INSTUI-4602